<template>
  <div class="hello" id="myCollect" :style="{minHeight : currHeight + 'px'}">
    <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <!-- 收藏栏 -->
    <div class="collectBox" v-for="(content,index) in box" :key="index">
      <div class="imgBox">
        <img :src="content.url" alt="">
      </div>
      <div class="writingBox">
        <p class="describe">{{content.describe}}</p>
        <p class="price">
          <span class="money">{{content.money}}</span>
          <svg t="1607048467506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1793" width="12" height="12"><path d="M614.85662844 786.28194314c-19.01776219 0-34.2855431-15.26778094-34.28554313-34.28554314L580.57108531 374.85542844c0-19.01776219 15.26778094-34.2855431 34.28554313-34.28554313 19.01776219 0 34.2855431 15.26778094 34.28554313 34.28554313l0 377.14097156C649.14217157 771.01416219 633.87439059 786.28194314 614.85662844 786.28194314L614.85662844 786.28194314zM409.14337156 786.28194314c-19.01776219 0-34.2855431-15.26778094-34.28554313-34.28554314L374.85782843 374.85542844c0-19.01776219 15.26778094-34.2855431 34.28554313-34.28554313 19.01776219 0 34.2855431 15.26778094 34.28554313 34.28554313l0 377.14097156C443.42891469 771.01416219 428.16113375 786.28194314 409.14337156 786.28194314L409.14337156 786.28194314zM957.71205687 203.42771469l-171.42771465 0L786.28434314 134.85662844C786.28434314 78.20512626 740.48100031 32 684.23128156 32L340.57228532 32c-56.65150219 0-102.85662844 46.20512625-102.85662846 102.85662844L237.71565686 203.42771469l-171.42771467 0C47.27018096 203.42771469 32.00240002 218.69549469 32.00240002 237.71325689c0 19.01776219 15.26778094 34.2855431 34.28554311 34.28554312l891.42411468 0c19.01776219 0 34.2855431-15.26778094 34.28554313-34.28554315C991.99759998 218.69549469 976.72981904 203.42771469 957.71205687 203.42771469L957.71205687 203.42771469zM306.28674311 134.85662844c0-18.88383375 15.40170844-34.2855431 34.28554315-34.28554312L684.23128156 100.57108528c18.74990625 0 33.48197529 14.999925 33.4819753 34.28554316L717.71325689 203.42771469 306.28674311 203.42771469 306.28674311 134.85662844 306.28674311 134.85662844zM752.1327275 991.9952L272.13512749 991.9952c-56.65150219 0-102.85662844-46.20512625-102.85662843-102.85662844L169.27849906 374.31971655c0-18.88383375 15.40170844-34.2855431 34.28554313-34.28554313 18.88383375 0 34.2855431 15.40170844 34.28554312 34.28554315L237.84958531 889.13857156c0 18.88383375 15.40170844 34.2855431 34.28554313 34.28554313l480.13152751 0c18.88383375 0 34.2855431-15.40170844 34.28554311-34.28554313L786.55219906 375.79292375c0-18.88383375 15.26778094-34.2855431 34.28554312-34.28554313 19.01776219 0 34.2855431 15.40170844 34.28554313 34.28554313L855.12328438 889.13857156C854.9893569 945.79007374 808.78423062 991.9952 752.1327275 991.9952L752.1327275 991.9952zM752.1327275 991.9952" p-id="1794" fill="#b7b7b7"></path></svg>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCollect',
  data () {
    return {
        box:[
          {
            url:require('../assets/images/我的收藏/pic_1.png'),
            describe:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
            money:'¥ 2000.00',
          },
          {
            url:require('../assets/images/我的收藏/pic_1.png'),
            describe:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
            money:'¥ 2000.00',
          }
        ],
        currHeight:'',      
    }
  },
  methods: {
    onClickLeft() {
           
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
  mounted(){
    
    this.currHeight = document.documentElement.clientHeight
    window.onresize = () =>{
      this.currHeight = document.documentElement.clientHeight
    }
    // console.log(this.currHeight);
  }
}
</script>

<style scoped lang='less'>
.hello{
  background: #f3f4f6;
}
// 导航栏
.navBox{
  width: 100%;
  height: 90px; 
}
.van-nav-bar__content{
  height: 90px;
  background:rgba(48, 48, 50, );
  line-height: 90px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon{
    color: #fff;
  }
}
// 收藏栏
.collectBox{
  width: 100%;
  height: 180px;
  padding: 30px 0 0 54px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #999;
  .imgBox{
    width: 120px;
    height: 120px;
    margin-right: 15px;
    float: left;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .writingBox{
    width: 520px;
    height: 120px;
    float: left;
    .describe{
      font-size: 24px;
      color: #d9d9d9;
      line-height: 32px;
      // margin-bottom: 10px;
    }
    .price{
      font-size: 20px;
      color: #4c67ab;
      margin-top:20px;
      .money{
        float: left;
      }
      .icon{
        float: right;
      }
    }
  }
}
</style>
